<!--
* @Author: yx
* @Description: 树&查询表单&表格
* 特别注意: 1.yx-container容器组件，不能放在对话框等弹框组件里,内置了固定宽度；想要放，可自己包裹个class再改yx-container容器的样式。
*          2.yx-common 开头才是公共样式
-->
<template>
  <div class="form-table-tree">
    <yx-container layout="left-right" :spacing="2" :span="[2.2]">
      <template #left>
        <div class="yx-common-formwork__tree">
          <yx-tree
            :data="treeData"
            @append="append"
            @remove="remove"
            @edit="edit"
            scroll
            scroll-width="280"
          ></yx-tree>
        </div>
      </template>
      <template #right>
        <div class="yx-common-formwork__select-form">
          <yx-select-form
            @handle-submit="handleSubmit"
            :right-button-width="130"
            :model="model"
            :data="selectFormdata"
            :form-width="200"
            :label-suffix="$labelSuffix"
          >
          </yx-select-form>
        </div>
        <div class="yx-common-formwork__button-table">
          <el-button size="mini" type="primary">新增</el-button>
          <el-button size="mini" type="warning" plain>禁用</el-button>
          <el-button size="mini" type="danger" plain>删除</el-button>
          <el-button size="mini" plain>导出</el-button>
          <el-button size="mini" plain>导入</el-button>

          <yx-table-pagination
            class="yx-common-formwork__table"
            @btn-operate="btnOperate"
            @current-change="currentChange"
            :page-size="pageSize"
            :columns="columns"
            :data="tableData"
            :button="button"
          >
          </yx-table-pagination>
        </div>
      </template>
    </yx-container>
  </div>
</template>

<script>
export default {
  name: 'form-table-tree',
  data () {
    return {
      // 表头
      columns: [
        {
          label: 'Name',
          prop: 'name',
          type: 'tree'
        },
        {
          label: 'Name',
          prop: 'name'
        },
        {
          label: 'Age',
          prop: 'age',
          width: 100,
          sortable: 'custom', // 接受一个Boolean，默认为false,如果需要后端排序，需将sortable设置为custom
          filters: [{ text: 18, value: 18 }, { text: 19, value: 19 }, { text: 20, value: 20 }]
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: 'Address',
          prop: 'address',
          render: (h, params) => {
            return h('div', {
            }, params.row.address + '我是被转换超级近')
          }
        },
        {
          label: '操作',
          type: 'operate',
          width: 186,
          fixed: 'right'
        }
      ],

      // 表格
      tableData: [
        {
          id: 1,
          name: 'John Brown',
          age: 18,
          address: 'New York No. 1 Lake Park',
          date: '2016-10-03'
        },
        {
          id: 2,
          name: 'Jim Green',
          age: 24,
          address: 'London No. 1 Lake Park',
          date: '2016-10-01'

        },
        {
          id: 3,
          name: 'Joe Black',
          age: 30,
          address: 'Sydney No. 1 Lake Park',
          date: '2016-10-02'
        },
        {
          id: 4,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 5,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 6,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'

        },
        {
          id: 7,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        },
        {
          id: 8,
          name: 'Jon Snow',
          age: 26,
          address: 'Ottawa No. 2 Lake Park',
          date: '2016-10-04'
        }
      ],
      // 表格按钮
      button: [
        {
          value: '新增',
          type: 'text'
        },
        {
          value: '查看',
          type: 'text'
        },

        {
          value: '修改',
          type: 'text'
        },
        {
          value: '删除',

          type: 'text'
        }
      ],
      // 分页的页码
      pageSize: 20,
      // 树的数据
      treeData: [
        {
          id: 1,
          label: '一级 1',
          disabled: true, // 设置某个节点不能被选择
          children: [{
            id: 4,
            label: '二级 1-1 横向滚动条demo',
            children: [{
              id: 9,
              label: '三级 1-1-1'
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1',
            children: [{
              id: 6,
              label: '三级 2-1-1'

            }]
          }, {
            id: 3,
            label: '二级 2-2',

            children: [{
              id: 7,
              label: '三级 2-2-1'
            }]
          }]
        }, {
          label: '一级 3',
          id: 8,
          children: [{
            id: 10,
            label: '二级 3-1',
            children: [{
              id: 11,
              label: '三级 3-1-1'
            }]
          }, {
            label: '二级 3-2',
            id: 12,
            children: [{
              id: 13,
              label: '三级 3-2-1'
            }]
          }]
        }
      ],
      model: {
        name: '',
        department: '',
        status: [], // checkbox是多选的时候，声明时一定要写成数组形式，否则会出现选一个全部勾选情况。
        address: '',
        date: '',
        time: ''
      },
      selectFormdata:
        [
          {
            label: '统一社会信用代码',
            prop: 'name',
            type: 'input',
            maxlength: 5 // 输入长度的限制
          },

          {
            label: '所属部门',
            prop: 'department',
            type: 'select',
            option: [
              {
                label: '北京市',
                value: 'beijing'
              },
              {
                label: '上海市',
                value: 'shanghai'
              },
              {
                label: '深圳市',
                value: 'shenzhen'
              }
            ]
          },
          {
            label: '状态',
            prop: 'status',
            type: 'checkbox',
            option: [
              {
                label: '北京市',
                value: 'beijing1'
              },
              {
                label: '上海市',
                value: 'shanghai2'
              }
              // {
              //   label: '深圳市',
              //   value: 'shenzhen3'
              // }
            ]
          },
          {
            label: '地址',
            prop: 'address',
            type: 'radio',
            option: [
              {
                label: '北京市',
                value: 'beijing'
              },
              {
                label: '上海市',
                value: 'shanghai'
              }
              // {
              //   label: '深圳市',
              //   value: 'shenzhen'
              // }
            ]
          },
          {
            label: '日期',
            prop: 'date',
            type: 'date'
            // pickerType: 'date', //类型可选为:date、datetime
            // valueFormat: 'yyyy-MM', //输出值的格式转换
            // format: 'yyyy-MM'//选择框里的值的格式转换
          },
          {
            label: '时间',
            prop: 'time',
            type: 'time'
            // valueFormat: 'mm:ss', //输出值的格式转换
            // format: 'mm:ss'//选择框里的值的格式转换
          }
        ]
    }
  },
  methods: {
    // 查询表单的事件
    handleSubmit (emit) {
      console.log(emit)
    },

    // 表格上的按钮的点击事件
    btnOperate (emit) {
      console.log(emit)
      // this.visible = !this.visible
    },

    // 分页切换
    currentChange (emit) {
      console.log(emit)
    },

    // 树-增加
    append (node, data) {
      console.log(node, data)
    },
    // 树-删除
    remove (node, data) {
      console.log(node, data)
    },
    // 树-修改
    edit (node, data) {
      console.log(node, data)
    }
  }
}

</script>
